<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Insha - Css3 Responsive Sidebar Menu</title>

    <link href="../static/css/css2.css" rel="stylesheet">
    <link href='../static/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="../static/css/insha-style.css">

</head>

<body>

<div class="main">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="#">
                        <i class='bx bxs-bank'></i>
                        银行业务管理系统
                    </a>
                </div>
            </div>
            <i class='bx bx-menu' id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">

            <li>
                <a href="../online.html">
                    <i class='bx bx-yen'></i>
                    <span class="links_name">网上银行</span>
                </a>
                <span class="tooltip">网上银行</span>
            </li>
            <li>
                <a href="../counter.html">
                    <i class='bx bxs-user-account'></i>
                    <span class="links_name">银行柜面</span>
                </a>
                <span class="tooltip">银行柜面</span>
            </li>

        </ul>

    </div>
    <div class="home_content" id="app">
        <div class="text">银行柜面</div>
        我是开户页面
        <div class="rg_layout">
            <div class="rg_left">
                <p>用户开户</p>
                <p>ACCOUNT OPENING</p>

            </div>

            <div class="rg_center">
                <div class="rg_form">
                    <!--定义表单 form-->
                    <form action="#" method="">
                        <table>
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"
                                                            v-model="name"></td>
                            </tr>

                            <tr>
                                <td class="td_left"><label for="idCard">身份证号</label></td>
                                <td class="td_right"><input type="text" name="idCard" id="idCard"
                                                            placeholder="请输入身份证号" v-model="idCard" @blur="ic()">
                                </td>
                            </tr>

                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" id="email"
                                                            placeholder="请输入邮箱xx@xx" v-model="email" @blur="em()">
                                </td>
                            </tr>


                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"
                                                            v-model="tel" @blur="tl()"></td>
                            </tr>

                            <tr>

                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="male" v-model="sex"> 男
                                    <input type="radio" name="gender" value="female" v-model="sex"> 女
                                </td>
                            </tr>

                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday"
                                                            placeholder="请输入出生日期" v-model="bir"></td>
                            </tr>

                            <tr>
                                <td class="td_left"><label for="address">住址</label></td>
                                <td class="td_right"><input type="text" name="address" id="address"
                                                            placeholder="请输入住址" v-model="ads"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password1">取款密码</label></td>
                                <td class="td_right"><input type="password" name="password1" id="password1"
                                                            placeholder="请输入取款密码 6位" v-model="password1"
                                                            @blur="pd1()"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password2">确认密码</label></td>
                                <td class="td_right"><input type="password" name="password2" id="password2"
                                                            placeholder="请再次输入取款密码" v-model="password2"
                                                            @blur="pd2()"></td>
                            </tr>


                            <tr>
                                <td colspan="2" align="center"><input type="button" id="btn_sub" value="开户"
                                                                      @click="open()"></td>
                            </tr>
                        </table>

                    </form>


                </div>

            </div>

            <div class="rg_right">
                <!-- <p>已有账号?<a href="#">立即登录</a></p> -->
                <tr>
                    <td class="td_left"><input type="checkbox" name="onlineBank" id="onlineBank" v-model="box"></td>
                    <td class="td_right"><label for="checkbox">开通网上银行</label></td>
                </tr>
                <br>
                <!-- <tr>
                <td class="td_left"><input type="checkbox" name="onlineBank" id="onlineBank"></td>
                <td class="td_right"><label for="checkbox" >开通短信通知</label></td>
            </tr> -->
            </div>
            <div class="rg_right1">
                <button id="bo" @click="back1()">返回</button>
            </div>

        </div>
    </div>
</div>


<script src="../static/js/scripts.js"></script>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            password1: "",
            password2: "",
            name: "",
            idCard: "",
            email: "",
            tel: "",
            sex: "female",
            bir: null,
            ads: "",
            box: true

        },
        methods: {
            back1() {
                location.href = "../counter.html"
            },
            pd1() {
                if (this.password1 != "") {
                    let rule = new RegExp("(^[0-9]*$)")
                    if (rule.test(this.password1) == false) {
                        if (this.password1.length != 6) {
                            alert("您的密码长度不正确，请重新输入")
                            this.password1 = "";
                        }
                    }

                }

            },
            pd2() {
                if (this.password2 != "") {
                    if (this.password1 == this.password2) {
                    } else {
                        alert("您的两次密码输入不相同，请重新输入")
                        this.password1 = "";
                        this.password2 = "";
                    }
                }

            },
            em() {
                if (this.email != "" && this.email.indexOf("@") == -1) {
                    let rule = new RegExp("(^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$)")
                    if (rule.test(this.email) == false) {
                        alert("您的email格式不正确，请重新填写")
                        this.email = "";
                    }

                }

            },
            ic() {
                if (this.idCard != "") {
                    let rule = new RegExp("(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)")
                    if (rule.test(this.idCard) == false) {
                        alert("您的身份证号格式不正确，请重新输入")
                    }
                }
            },
            open() {


                if (this.name != "" && this.email != "" && this.idCard != "" &&
                    this.tel != "" && this.ads != "" && this.password1 != ""
                    && this.bir != null && this.password2 != "") {
                    let sex1 = null;
                    if (this.sex == "male") {
                        sex1 = 0;
                    } else if (this.sex == "female") {
                        sex1 = 1;
                    }
                    let box1 = null;

                    if (this.box == true) {
                        box1 = 0;
                    } else if (this.box == false) {
                        box1 = 1;
                    }
                    axios({
                        method: "post",
                        url: "http://localhost:8080/user/adduserinfo",
                        data: {
                            name: this.name,
                            idCard: this.idCard,
                            sex: sex1,
                            birthday: this.bir,
                            status: 0,
                            phone: this.tel,
                            payPassword: this.password1,
                            payPassword1: this.password2,
                            address: this.ads,
                            onlineBank: box1,
                            email: this.email
                        },
                        headers: {
                            "Content-Type": "application/json",


                        }
                    }).then(res => {
                        let code = res.data.code;
                        if (code == 403) {
                            alert(res.data.message)
                        } else {

                            alert("开户成功")
                           window.location.reload();
                        }
                    })


                } else {
                    alert("上述信息皆为必填项，请勿为空")
                }
            },
            tl() {
                let rule = new RegExp("(^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$)")
                if (rule.test(this.tel) == false) {
                    alert("您的手机号码格式不正确")
                    this.tel = "";
                }
            }


        }
    })
</script>

</body>

</html>
